<template>
  <div style="line-height: 50px;display: flex">
    <div style="width: 200px;margin-left: 10px; font-weight: bold; color: dodgerblue">
      房屋租赁管理系统
    </div>
    <span style="margin-left: -50px; font-size: 15px; font-weight: bold; color: dodgerblue">
      您好！管理员&nbsp;&nbsp;{{ name }}
    </span>
    <Clock style="font-size: 20px; position: absolute;left: 50%;overflow: hidden;"/>
    <div style="flex: 1"></div>
    <div class="right-info">
      <el-button @click="SignOut" style="margin-right: 10px;">
        <el-icon :size="18" style="margin-right: 5px;">
          <avatar />
        </el-icon>
        退出登录
      </el-button>
    </div>
  </div>
</template>

<script>

import request from "@/axios/request";
import Clock from "@/components/Clock";

const {ElMessage} = require("element-plus");

export default {
  name: "AdminHeader",
  components: {
    Clock
  },
  data() {
    return {
      name: '',
    }
  },
  created() {
    const user = JSON.parse(sessionStorage.getItem("userInfo"));
    if (user && user.username) {
      this.name = user.username;
    }
  },
  methods: {
    SignOut() {
      sessionStorage.clear()
      ElMessage({
        message: '用户退出登录',
        type: 'success',
      });
      this.$router.replace({path: '/Login'});
    },
  },
}
</script>

<style scoped>
.right-info {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5%;
}

.right-info:hover {
  cursor: pointer;
}
</style>